import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Icon } from 'antd';
import './index.scss';

class Dialog extends React.PureComponent {
  static propTypes = {
    contents: PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  show() {
    this.setState({ show: true });
  }
  onClose() {
    this.setState({ show: false });
  }
  render() {
    const { show } = this.state;
    const { contents } = this.props;
    const display = show ? 'block' : 'none';

    return (
      <div
        style={{ display }}
      >
        <div className="mask" >
          <Icon type="close-circle" className="close" onClick={this.onClose.bind(this)} />
        </div>
        <div className="dialog">
          <div className="video">
            {/*<video controls preload className="video">*/}
            {/*<source src={contents} />*/}
            {/*</video>*/}
            <img src={contents} alt="视频直连" />
          </div>
        </div>
      </div>
    );
  }
}
Dialog.newInstance = function newDialogInstance(props) {
  const div = document.createElement('div');
  document.body.appendChild(div);

  const dialog = ReactDOM.render(<Dialog {...props} />, div);

  return {
    component: dialog,
    open() {
      dialog.show();
    },
    destroy() {
      ReactDOM.unmountComponentAtNode(div);
      document.body.removeChild(div);
    },
  };
};
export default Dialog;
